<template>

<div class="login">
  <van-nav-bar
      title="用户登录"
      left-text="返回"

      left-arrow
      @click-left="onClickLeft"

  />
  <div class="body">
  <van-form @submit="login">
    <van-field
        v-model="form.username"
        name="用户名"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' },{
                       pattern:/^([a-zA-Z0-9_-]|[\u4E00-\u9FA5]){4,9}$/,
                       message: '用户名长度4至9位数'
                     }]"
    />
    <van-field
        v-model="form.pwd"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' },{ pattern:/[a-zA-Z0-9]{6,12}/,
            message: '密码格式不对'}]"
    />
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">登&nbsp;&nbsp;&nbsp;&nbsp;录</van-button>
    </div>
    <div class="btn-wj">
      <div>忘记密码</div>
      <div @click="goreg">立即注册</div>
    </div>
  </van-form>
  </div>
</div>
</template>

<script>
import {mapActions} from "vuex"

export default {
  name: "Login",
  data() {
    return {
      form:{
      username: '',
      pwd: '',
      }
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push('/user')
    },

    goreg(){
      this.$router.push('/reg')
    },

    ...mapActions(["vlogin"]),
    login() {
      this.vlogin(this.form).then(()=>{
        this.$notify({type: 'success', message: '恭喜！登录成功'});
        this.$router.push('/')
      }).catch(err=>{
        this.$notify({type: 'danger', message: '用户名或密码错误'});
      });
    }
  },
}
</script>

<style lang="scss">
@import "public/sass/login";
</style>